<template>
  <div>
    <el-card class="box-card card">

      <!-- top -->
      <div class="top">
        <el-input v-model="search" class="search" placeholder="根据用户名搜索" />
        <el-button class="clear" @click="clearSearch">清空</el-button>
        <el-button type="primary" @click="toSearch">搜索</el-button>
        <el-button icon="el-icon-edit" type="success" round class="addBtn" @click="addUser">新增用户</el-button>
      </div>
      <!-- message  -->
      <div class="message">
        <el-alert
          type="success"
          :closable="false"
          show-icon
        >
          <slot name="title"><span>  共{{ page.total }}条记录</span></slot>
        </el-alert>
      </div>
      <!-- table  -->
      <div class="table">
        <el-table
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            prop="id"
            label="序号"
            width="120"
          />
          <el-table-column
            prop="email"
            label="邮箱"
            width="180"
          />
          <el-table-column
            prop="phone"
            label="电话"
          />
          <el-table-column
            prop="username"
            label="用户名"
          />
          <el-table-column
            prop="permission_group_title"
            label="权限组名称"
          />
          <el-table-column
            prop="role"
            label="角色"
          />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.row.id)"
              >编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- pagination -->
      <div class="pagination">
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination
            :current-page="page.page"
            :page-size="page.size"
            :total="page.total"
            layout="prev, pager, next"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </div>
      <!-- addUserVue -->
      <addUserVue ref="addUserVue" :show-dialog.sync="showDialog" @reAfterAdd="reAfterAdd(page)" />

    </el-card>
  </div>
</template>

<script>
import addUserVue from './component/addUser.vue'
import { getUserList, delUser } from '@/api/user'
export default {
  components: {
    addUserVue
  },
  data() {
    return {
      search: '',
      showDialog: false,
      page: {
        page: 1, // 当前页码
        size: 10, // 每页显示的条数
        total: 0 // 服务器的总数据
      },
      // 存储所有的用户列表
      tableData: [],
      userId: ''
    }
  },
  created() {
    this.getUserList(this.page)
  },

  methods: {
    // 搜索按钮
    toSearch() {
      console.log('开始搜索,关键词是：', this.search)
      // 根据username筛选
      this.tableData = this.fuzzyQuery(this.tableData, this.search)
      this.page.total = this.tableData.length
    },
    // 新增用户按钮
    addUser() {
      this.showDialog = true
    },
    // 获取用户列表方法
    async getUserList(data) {
      console.log('获取用户列表')
      const res = await getUserList(data)
      console.log(res, '用户列表')
      this.tableData = res.list
      this.page.total = res.counts
    },
    // 切换分页
    async handleCurrentChange(newPage) {
      this.page.page = newPage
      await this.getUserList(this.page)
    },
    // 删除用户
    async handleDelete(id) {
      if (id === 2) {
        return this.$message.warning('该用户禁止删除！')
      }
      console.log(id)
      await this.$confirm('确定删除此用户？')
      await delUser(id)
      this.getUserList(this.page)
      this.$message.success('删除用户成功')
    },
    // 编辑按钮
    async handleEdit(id) {
      if (id === 2) {
        return this.$message.warning('该用户禁止编辑！')
      }
      // console.log('这是父组件，点击编辑按钮---当前的用户ID', id)
      // 点击编辑按钮，弹出子组件
      this.showDialog = true
      // this.userDetail = await getUserDetail(id)
      // console.log(this.userDetail, '获取用户详细信息')
      // this.userId = id
      this.$refs.addUserVue.rePut(id)
    },
    // 刷新用户列表方法，供子组件$emit调用
    reAfterAdd(page) {
      this.getUserList(page)
      console.log('reAfterAdd')
    },
    clearSearch() {
      this.search = ''
      this.getUserList(this.page)
    },
    // 搜索用户的方法
    fuzzyQuery(list, keyWord) {
      var reg = new RegExp(keyWord)
      var arr = []
      for (var i = 0; i < list.length; i++) {
        if (reg.test(list[i].username)) {
          arr.push(list[i])
        }
      }
      return arr
    }

  }
}

</script>

<style scoped>

.card{
  margin-top: 10px;
  margin-right: 15px;
  margin-left: 15px;
  background-color: #fff;
}
.search{
  width: 200px;
  height: 10px;
}
.clear{
  margin-left: 15px;
  /* margin-right: 10px; */
}
.top{
  position: relative;
}
.addBtn{
position: absolute;
right: 15px;
}
.message{
  margin-top: 5px;
  margin-bottom: 5px;
}
.pagination{
  margin-top: 5px;
}
</style>
